<template>
    <div class="bar-box flex align-items space-between">
        <img class="left" :src="renderPic" alt="">
        <div class="right flex1" v-if='statusTxt'>
            <div class="txt" v-if='statusTxt.describe'>{{ statusTxt.describe }}</div>
            <div class="time" v-if='statusTxt.day'>预计送达时间:2020-06-12</div>
        </div>
    </div>
</template>

<script>
    import barpic1 from '@/assets/orderstatus1.png';
    import barpic2 from '@/assets/orderstatus2.png';
    import barpic3 from '@/assets/orderstatus3.png';
    import barpic4 from '@/assets/orderstatus4.png';
    import barpic5 from '@/assets/orderstatus5.png';
    import barpic6 from '@/assets/orderstatus6.png';
    
    export default {
        props:['status','statusTxt'],
        data(){
            return{
                barpic1,barpic2,barpic3,barpic4,barpic5,barpic6,
            }
        },
        computed:{
            //返一张符合当前状态的图片
            renderPic(){
                return ["",barpic1,barpic2,barpic3,barpic4,barpic5,barpic6,barpic6,barpic6,barpic6,barpic6][this.status]
            }
        },
        created(){}
    }
</script>

<style lang="less" scoped>
    .bar-box{
        width: 375px;
        height: 55px;
        background: #6B68FF;
        padding: 0 14px;
        .left{
            width: 25px;
            height: 25px;
            margin: 0;
        }
        .right{
            padding-left: 8px;
            overflow: hidden;
            .txt{
                width: 100%;
                font-size: 14px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #FFFFFF;
            }
            .time{
                font-size: 12px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #DAD9FF;
            }
        }
    }
</style>